<template>
  <div class="app-container">
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <h3>购货单</h3>
      <el-button
        type="success"
        size="small"
        icon="el-icon-plus"
        @click="openAddDialog"
        >新增</el-button
      >
    </div>

    <!-- 自定义下划线，替代el-divider -->
    <div class="custom-divider" />
    <!-- 搜索区域使用 transform 包裹 -->
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wapper">
        <div>
          <el-form
            ref="searchForm"
            :model="listQuery"
            :inline="true"
            label-width="90px"
          >
            <el-form-item label="商品:">
              <el-select
                v-model="listQuery.goodsId"
                clearable
                placeholder="请选择商品"
                style="width: 200px"
                @change="handleGoodsChanges"
              >
                <el-option
                  v-for="item in goodsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="负责人:">
              <el-select
                v-model="listQuery.directorId"
                placeholder="请选择负责人"
                clearable
                filterable
                remote
                @focus="onDirectorFocus"
                :remote-method="remoteSearchDirectors"
                :loading="directorLoading"
                style="width: 200px"
                @change="handleDirectorChange"
              >
                <el-option
                  v-for="item in directorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="日期范围:">
              <el-date-picker
                v-model="dateRange"
                clearable
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="timestamp"
                style="width: 350px"
                @change="handleDateChange"
              />
            </el-form-item>

            <el-form-item label="状态:">
              <el-select
                v-model="listQuery.status"
                clearable
                placeholder="请选择状态"
                style="width: 150px"
                @change="handleStatusChange"
              >
                <el-option label="全部" value="" />
                <el-option label="待验收" value="0" />
                <el-option label="已验收" value="1" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleFilter">查询</el-button>
              <el-button @click="resetFilter">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-collapse-transition>

    <!-- 操作按钮区域 -->
    <div class="table-operations-wrapper">
      <div class="table-operations">
        <!-- <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
            >{{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            ></i>
          </el-button> -->
        <el-form
          ref="searchForm"
          :model="listQuery"
          :inline="true"
          label-width="90px"
        >
          <el-form-item label="商品:">
            <el-select
              v-model="listQuery.goodsId"
              clearable
              placeholder="请选择商品"
              style="width: 200px"
              @change="handleGoodsChanges"
            >
              <el-option
                v-for="item in goodsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="负责人:">
            <el-select
              v-model="listQuery.directorId"
              placeholder="请选择负责人"
              clearable
              filterable
              :loading="directorLoading"
              @focus="onDirectorFocus"
              remote
              :remote-method="searchDirectors"
            >
              <el-option
                v-for="item in directorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="日期范围:">
            <el-date-picker
              v-model="dateRange"
              clearable
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              style="width: 350px"
              @change="handleDateChange"
            />
          </el-form-item>

          <el-form-item label="状态:">
            <el-select
              v-model="listQuery.status"
              clearable
              placeholder="请选择状态"
              style="width: 150px"
              @change="handleStatusChange"
            >
              <el-option label="全部" value="" />
              <el-option label="待验收" value="0" />
              <el-option label="已验收" value="1" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleFilter">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- <el-button size="small">商品记录</el-button>           -->
        <!-- <el-button
            type="success"
            size="small"
            @click="openAddDialog"
            icon="el-icon-plus"
            >新增</el-button
          > -->
        <!-- <el-button type="success" size="small" class="primary-btn"
            >保存并新增</el-button
          > -->
        <!-- <el-button type="primary" size="small" class="primary-btn"
            >保存</el-button
          > -->
        <!-- <el-button size="small">批量导入</el-button>
          <el-button size="small">审核</el-button> -->
      </div>

      <!-- 购物单录入区域 -->
      <div class="shopping-entry">
        <!-- <div class="entry-buttons">
          <el-button class="circle-btn" icon="el-icon-s-order">
            购货订单草稿
          </el-button>
          <el-button class="circle-btn" icon="el-icon-s-order">
            购货订单明细录入
          </el-button>
        </div> -->

        <!-- <div class="attachment-info">
            <el-link type="primary" class="upload-link">
              <i class="el-icon-paperclip"></i> 上传附件
            </el-link>
            <span class="order-number">单据编号: GHDD202503240001</span>
          </div> -->
      </div>
    </div>

    <!-- 商品表格区域 -->
    <el-table
      :data="purchaseList"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
    >
      <el-table-column label="序号" type="index" width="60" align="center" />

      <!-- 修改商品明细列，添加更多参数信息 -->
      <el-table-column label="商品明细" width="950" align="center">
        <template slot-scope="scope">
          <div
            v-if="scope.row.list && scope.row.list.length > 0"
            class="goods-detail-container"
          >
            <!-- 循环渲染每个商品项 -->
            <div
              v-for="(item, index) in scope.row.list"
              :key="index"
              class="goods-item"
            >
              <div class="goods-row">
                <!-- 第一行：商品名称、仓库、数量、单价 -->
                <div class="goods-name">{{ item.goodsName }}</div>
                <div class="goods-type">{{ item.warehouseName }}</div>
                <div class="goods-number">
                  数量: <span class="number-value">{{ item.number }}</span>
                </div>
                <div class="goods-price">
                  单价: <span class="price-value">¥{{ item.unitPrice }}</span>
                </div>
                <div class="goods-tax-rate">
                  税率: <span class="tax-rate-value">{{ item.taxRate }}%</span>
                </div>
                <div class="goods-tax-price">
                  税额:
                  <span class="tax-price-value">¥{{ item.taxPrice }}</span>
                </div>
                <div class="goods-total">
                  总价: <span class="total-value">¥{{ item.totalPrice }}</span>
                </div>
                <div class="goods-tax-total">
                  含税:
                  <span class="tax-total-value">¥{{ item.totalTaxPrice }}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="no-goods">暂无商品</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="warning">待验收</el-tag>
          <el-tag v-if="scope.row.status === 1" type="success">已验收</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime | dateFormat }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="prop" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            :disabled="scope.row.status === 1"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            :disabled="scope.row.status === 1"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        background
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 新增弹框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="90%">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <!-- 商品明细 -->
        <el-form-item label="商品明细">
          <div class="goods-table-container">
            <el-table
              :data="form.buyGoodsGoodsDTOS"
              border
              style="width: 100%"
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            >
              <el-table-column align="center" label="仓库" width="180">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'buyGoodsGoodsDTOS.' + scope.$index + '.warehouseId'"
                    :rules="{
                      required: true,
                      message: '请选择仓库',
                      trigger: 'change',
                    }"
                    class="mb-0"
                  >
                    <el-select
                      v-model="scope.row.warehouseId"
                      placeholder="请先选择仓库"
                      style="width: 100%"
                      @change="() => handleWarehouseChange(scope.$index)"
                    >
                      <el-option
                        v-for="item in warehouseList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="商品名称" width="300" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'buyGoodsGoodsDTOS.' + scope.$index + '.goodsId'"
                    :rules="{
                      required: true,
                      message: '请选择商品',
                      trigger: 'change',
                    }"
                    class="mb-0"
                  >
                    <el-select
                      v-model="scope.row.goodsId"
                      placeholder="请选择商品"
                      style="width: 100%"
                      filterable
                      remote
                      reserve-keyword
                      :disabled="!scope.row.warehouseId"
                      :remote-method="remoteSearchGoods"
                      :loading="goodsLoading"
                      popper-class="goods-select-dropdown"
                      @change="
                        (val) => handleGoodsItemChange(val, scope.$index)
                      "
                    >
                      <el-option
                        v-for="item in goodsList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                        <div class="goods-option-layout">
                          <span class="goods-name">{{ item.name }}</span>
                          <span class="goods-model" v-if="item.model">{{
                            item.model
                          }}</span>
                          <span class="goods-price" v-if="item.price"
                            >¥{{ item.price }}</span
                          >
                        </div>
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <div v-if="!scope.row.warehouseId" class="warehouse-warning">
                    请先选择仓库
                  </div>
                </template>
              </el-table-column>

              <el-table-column header-align="center" align="center" prop="prop" label="label">
              </el-table-column>

              <el-table-column label="数量" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'buyGoodsGoodsDTOS.' + scope.$index + '.number'"
                    :rules="{
                      required: true,
                      message: '请输入数量',
                      trigger: 'blur',
                    }"
                    class="mb-0"
                  >
                    <el-input-number
                      v-model="scope.row.number"
                      :min="1"
                      :precision="0"
                      style="width: 100%"
                      @change="() => handleNumberChange(scope.$index)"
                    />
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="单价" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'buyGoodsGoodsDTOS.' + scope.$index + '.unitPrice'"
                    class="mb-0"
                  >
                    <el-input
                      v-model="scope.row.unitPrice"
                      placeholder="单价"
                      disabled
                    >
                      <template slot="prepend">¥</template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="金额" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'buyGoodsGoodsDTOS.' + scope.$index + '.totalPrice'"
                    class="mb-0"
                  >
                    <el-input
                      v-model="scope.row.totalPrice"
                      placeholder="金额"
                      readonly
                      disabled
                    >
                      <template slot="prepend">¥</template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>

              <!-- 税率 -->
              <el-table-column label="税率" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'buyGoodsGoodsDTOS.' + scope.$index + '.taxRate'"
                    class="mb-0"
                  >
                    <el-input
                      v-model="scope.row.taxRate"
                      placeholder="税率"
                      disabled
                    >
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>

              <!-- 税额 -->
              <el-table-column label="税额" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'buyGoodsGoodsDTOS.' + scope.$index + '.taxPrice'"
                    class="mb-0"
                  >
                    <el-input
                      v-model="scope.row.taxPrice"
                      placeholder="税额"
                      readonly
                      disabled
                      class="tax-price-input"
                    >
                      <template slot="prepend">¥</template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>

              <!-- 含税总价 -->
              <el-table-column label="含税总价" width="150" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="
                      'buyGoodsGoodsDTOS.' + scope.$index + '.totalTaxPrice'
                    "
                    class="mb-0"
                  >
                    <el-input
                      v-model="scope.row.totalTaxPrice"
                      placeholder="含税总价"
                      readonly
                      disabled
                      class="total-tax-price-input"
                    >
                      <template slot="prepend">¥</template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="100" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    size="mini"
                    @click.prevent="removeGoodsItem(scope.$index)"
                  />
                </template>
              </el-table-column>
            </el-table>

            <div class="add-goods-btn">
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="addGoodsItem"
              >
                添加商品
              </el-button>
            </div>

            <!-- 订单合计信息 -->
            <div class="order-total">
              <span class="total-item"
                >数量合计:
                <span class="total-value">{{ totalCount }}</span></span
              >
              <span class="total-item"
                >金额合计:
                <span class="total-value price">¥{{ totalAmount }}</span></span
              >
              <span class="total-item"
                >含税合计:
                <span class="total-value price"
                  >¥{{ totalTaxPriceAmount }}</span
                ></span
              >
            </div>
          </div>
        </el-form-item>

        <!-- 负责人 -->
        <el-form-item label="负责人" prop="directorId">
          <el-select
            v-model="form.directorId"
            placeholder="请选择负责人"
            style="width: 100%"
            filterable
            :loading="directorLoading"
            remote
            @focus="onDirectorFocus"
            :remote-method="searchDirectors"
          >
            <el-option
              v-for="item in directorList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleEditSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selBuyGoodsListApi,
  addBuyGoodsoApi,
  updateBuyGoodsByIdApi,
  delBuyGoodsByIdApi,
} from "@/api/shopping";
import { selGoodsListApi, selGoodsByIdApi } from "@/api/goods";
import { selWarehouseListApi, selStaffListApi } from "@/api/system";
import { mapGetters } from "vuex";
export default {
  name: "PurchaseOrder",
  data() {
    return {
      isFilterVisible: false, // 控制筛选区域显示/隐藏
      scanEnabled: false,
      orderData: {
        supplier: "",
        salesPerson: "",
        orderDate: "2025-03-24",
        deliveryDate: "2025-03-24",
        orderType: "purchase",
        deliveryAddress: "",
        remark: "",
        discountRate: "0",
        discountAmount: "0",
        discountedAmount: "0.00",
        deliveryMethod: "",
      },
      salesPersonOptions: [
        { value: "admin", label: "管理员" },
        { value: "zhangsan", label: "张三" },
        { value: "lisi", label: "李四" },
      ],
      addressOptions: [
        { value: "address1", label: "广州市天河区某某路123号" },
        { value: "address2", label: "深圳市南山区某某路456号" },
      ],
      deliveryMethodOptions: [
        { value: "express", label: "快递" },
        { value: "self", label: "自提" },
        { value: "delivery", label: "送货" },
      ],
      warehouseOptions: [
        { value: "warehouse1", label: "主仓库" },
        { value: "warehouse2", label: "次仓库" },
      ],
      tableData: [
        {
          id: 1,
          productName: "",
          productImage: "",
          brand: "",
          productRemark: "",
          attribute: "",
          unit: "",
          warehouse: "",
          availableStock: 0,
          quantity: 0,
          batchNumber: "",
          packageType: "whole",
        },
        {
          id: 2,
          productName: "",
          productImage: "",
          brand: "",
          productRemark: "",
          attribute: "",
          unit: "",
          warehouse: "",
          availableStock: 0,
          quantity: 0,
          batchNumber: "",
          packageType: "whole",
        },
        {
          id: 3,
          productName: "",
          productImage: "",
          brand: "",
          productRemark: "",
          attribute: "",
          unit: "",
          warehouse: "",
          availableStock: 0,
          quantity: 0,
          batchNumber: "",
          packageType: "whole",
        },
        {
          id: 4,
          productName: "",
          productImage: "",
          brand: "",
          productRemark: "",
          attribute: "",
          unit: "",
          warehouse: "",
          availableStock: 0,
          quantity: 0,
          batchNumber: "",
          packageType: "whole",
        },
        {
          id: 5,
          productName: "",
          productImage: "",
          brand: "",
          productRemark: "",
          attribute: "",
          unit: "",
          warehouse: "",
          availableStock: 0,
          quantity: 0,
          batchNumber: "",
          packageType: "whole",
        },
      ],
      totalQuantity: 0,
      multipleSelection: [],
      // 列表查询条件
      listQuery: {
        page: 1,
        pageSize: 10,
        goodsId: "", // 商品id
        directorId: "", // 负责人id
        startTime: "", // 开始时间
        endTime: "", // 结束时间
        status: "", // 状态
      },
      purchaseList: [], // 购货单列表
      dateRange: [], // 日期范围
      // 商品查询参数
      goodsQuery: {
        goodsTypeId: null,
        name: "",
        page: 1,
        pageSize: 10,
        supplierId: null,
        warehouseId: null,
      },
      // 仓库查询参数
      warehouseQuery: {
        page: 1,
        pageSize: 9999,
      },
      goodsList: [], // 商品列表
      directorList: [], // 主管列表
      warehouseList: [], // 仓库列表
      total: 0,
      // 商品选择弹窗相关数据
      productDialogVisible: false,
      productQuery: {
        keyword: "",
        category: "",
        hasInventory: false,
        page: 1,
        limit: 20,
      },
      productList: [],
      selectedProducts: [],
      categoryTree: [
        {
          label: "全部",
          children: [
            {
              label: "茶",
              children: [{ label: "绿茶" }, { label: "红茶" }],
            },
            {
              label: "酒类",
              children: [{ label: "啤酒" }, { label: "葡萄酒" }],
            },
            {
              label: "饮料",
              children: [{ label: "果汁" }, { label: "矿泉水" }],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      dialogVisible: false, // 控制弹框显示
      dialogTitle: "新增", // 弹框标题
      // 新增表单数据
      form: {
        askId: "",
        directorId: "",
        remark: "",
        operatorId: this.$store.getters.userId,
        buyGoodsGoodsDTOS: [this.getDefaultGoodsItem()],
      },
      rules: {
        directorId: [
          { required: true, message: "请选择负责人", trigger: "change" },
        ],
      },
      formDisabled: {
        unitPrice: false,
        taxRate: false,
        warehouseId: false,
      },
      // 职员列表
      staffQuery: {
        page: 1,
        pageSize: 9999,
        name: "",
        mobile: "",
        parent: "",
      },
      editDialogVisible: false,
      editForm: {
        directorId: "",
        goodsId: "",
        number: 0,
        operatorId: "",
        remark: "",
        taxPrice: 0,
        taxRate: 0,
        totalPrice: 0,
        totalTaxPrice: 0,
        unitPrice: 0,
        warehouseId: "",
      },
      currentEditId: null, // 当前编辑的记录ID
      directorLoading: false,
      goodsLoading: false,
    };
  },
  computed: {
    // 计算总数量
    totalNumber() {
      if (
        !this.form.buyGoodsGoodsDTOS ||
        this.form.buyGoodsGoodsDTOS.length === 0
      ) {
        return 0;
      }
      return this.form.buyGoodsGoodsDTOS.reduce((sum, item) => {
        return sum + (Number(item.number) || 0);
      }, 0);
    },

    // 计算总金额
    totalAmount() {
      if (
        !this.form.buyGoodsGoodsDTOS ||
        this.form.buyGoodsGoodsDTOS.length === 0
      ) {
        return 0;
      }
      return this.form.buyGoodsGoodsDTOS
        .reduce((sum, item) => {
          return sum + (Number(item.totalPrice) || 0);
        }, 0)
        .toFixed(2);
    },

    // 计算含税总金额
    totalTaxAmount() {
      if (
        !this.form.buyGoodsGoodsDTOS ||
        this.form.buyGoodsGoodsDTOS.length === 0
      ) {
        return 0;
      }
      return this.form.buyGoodsGoodsDTOS
        .reduce((sum, item) => {
          return sum + (Number(item.totalTaxPrice) || 0);
        }, 0)
        .toFixed(2);
    },
    ...mapGetters(["userId"]),
  },
  created() {
    this.getList();
    this.selGoodsList();
    this.selWarehouseList();
    this.selStaffList();
  },
  methods: {
    // 获取列表数据
    async getList() {
      try {
        const res = await selBuyGoodsListApi(this.listQuery);
        this.purchaseList = res.records || [];
        this.total = res.total || 0;
      } catch (error) {
        console.error("获取列表失败:", error);
        this.$message.error("获取列表失败");
      }
    },
    // 获取商品列表
    async selGoodsList() {
      this.goodsLoading = true;
      try {
        const res = await selGoodsListApi(this.goodsQuery);
        this.goodsList = res.records || [];
      } catch (error) {
        console.error("获取商品列表失败:", error);
        this.$message.error("获取商品列表失败");
        this.goodsList = [];
      } finally {
        this.goodsLoading = false;
      }
    },
    // 获取仓库列表
    async selWarehouseList() {
      const res = await selWarehouseListApi(this.warehouseQuery);
      this.warehouseList = res.records || [];
    },
    // 职工列表
    async selStaffList() {
      const res = await selStaffListApi(this.staffQuery);
      this.directorList = res.records || [];
      console.log(this.directorList);
    },
    // 点击新增按钮，打开弹框
    openAddDialog() {
      this.dialogTitle = "新增购货单";
      this.currentEditId = null; // 确保重置编辑ID
      this.resetForm();
      this.dialogVisible = true;
    },

    // 关闭弹框
    handleClose() {
      this.dialogVisible = false;
      this.resetForm();
    },

    // 新增提交
    async handleAdd() {
      try {
        await this.$refs.form.validate();

        const params = {
          directorId: this.form.directorId,
          goodsId: this.form.goodsId,
          number: parseInt(this.form.number),
          operatorId: this.form.operatorId,
          remark: this.form.remark,
          taxPrice: parseFloat(this.form.taxPrice),
          taxRate: parseFloat(this.form.taxRate),
          totalPrice: parseFloat(this.form.totalPrice),
          totalTaxPrice: parseFloat(this.form.totalTaxPrice),
          unitPrice: parseFloat(this.form.unitPrice),
          warehouseId: this.form.warehouseId,
        };

        const res = await addBuyGoodsoApi(params);
        if (res.code === 1) {
          this.$message.success("新增成功");
          this.dialogVisible = false; // 关闭弹框
          this.getList(); // 刷新列表
        } else {
          this.$message.error(res.msg || "新增失败");
        }
      } catch (error) {
        console.error("新增失败:", error);
        this.$message.error("新增失败: " + (error.message || "未知错误"));
      }
    },

    // 重置表单
    resetForm() {
      this.form = {
        askId: "",
        directorId: "",
        remark: "",
        operatorId: this.$store.getters.userId,
        buyGoodsGoodsDTOS: [this.getDefaultGoodsItem()],
      };
    },

    // 获取默认商品项
    getDefaultGoodsItem() {
      return {
        goodsId: "", // 商品ID
        warehouseId: "", // 仓库ID
        number: 1, // 默认数量为1
        unitPrice: 0, // 单价
        totalPrice: "0.00", // 总价
        taxRate: 0, // 税率
        taxPrice: "0.00", // 税额
        totalTaxPrice: "0.00", // 含税总价
        specification: "", // 规格型号
      };
    },

    // 添加商品项
    addGoodsItem() {
      const newItem = this.getDefaultGoodsItem();
      this.form.buyGoodsGoodsDTOS.push(newItem);
    },

    // 移除商品项
    removeGoodsItem(index) {
      if (this.form.buyGoodsGoodsDTOS.length > 1) {
        this.form.buyGoodsGoodsDTOS.splice(index, 1);
      } else {
        this.$message.warning("至少需要一项商品");
      }
    },

    // 仓库变更处理
    handleWarehouseChange(index) {
      const warehouseId = this.form.buyGoodsGoodsDTOS[index].warehouseId;

      // 清空当前行的商品选择
      this.form.buyGoodsGoodsDTOS[index].goodsId = "";
      this.form.buyGoodsGoodsDTOS[index].specification = "";
      this.form.buyGoodsGoodsDTOS[index].unitPrice = 0;
      this.form.buyGoodsGoodsDTOS[index].totalPrice = 0;
      this.form.buyGoodsGoodsDTOS[index].taxPrice = 0;
      this.form.buyGoodsGoodsDTOS[index].totalTaxPrice = 0;

      // 更新商品查询参数中的仓库ID
      this.goodsQuery.warehouseId = warehouseId;

      // 重新加载该仓库的商品列表
      this.selGoodsList();
    },

    // 远程搜索商品
    async remoteSearchGoods(query) {
      if (query !== "") {
        this.goodsLoading = true;
        try {
          // 更新商品查询参数
          this.goodsQuery.name = query;
          this.goodsQuery.page = 1;

          // 调用API获取商品列表
          const res = await selGoodsListApi(this.goodsQuery);
          this.goodsList = res.records || [];
        } catch (error) {
          console.error("搜索商品失败:", error);
          this.$message.error("搜索商品失败");
          this.goodsList = [];
        } finally {
          this.goodsLoading = false;
        }
      } else {
        // 如果查询为空，获取默认列表
        this.goodsQuery.name = "";
        this.selGoodsList();
      }
    },

    // 选择商品后处理数据回显和计算
    async handleGoodsItemChange(val, index) {
      if (!val) return;

      try {
        const loading = this.$loading({
          lock: true,
          text: "获取商品信息...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });

        // 获取商品详情
        const res = await selGoodsByIdApi(val);
        if (res && res.code === 1) {
          const goodsInfo = res.data;

          // 更新商品信息
          this.$set(
            this.form.buyGoodsGoodsDTOS[index],
            "goodsId",
            goodsInfo.id
          );
          this.$set(
            this.form.buyGoodsGoodsDTOS[index],
            "unitPrice",
            goodsInfo.price || 0
          );
          this.$set(
            this.form.buyGoodsGoodsDTOS[index],
            "specification",
            goodsInfo.model || ""
          );
          this.$set(
            this.form.buyGoodsGoodsDTOS[index],
            "taxRate",
            parseFloat(goodsInfo.tax) || 0
          );

          // 确保立即更新价格计算
          this.$nextTick(() => {
            this.updateItemPrice(index);
          });
        } else {
          this.$message.error("获取商品信息失败");
        }

        loading.close();
      } catch (error) {
        console.error("获取商品详情失败:", error);
        this.$message.error("获取商品详情失败");
      }
    },

    // 更新商品价格计算
    updateItemPrice(index) {
      const item = this.form.buyGoodsGoodsDTOS[index];
      if (item) {
        const number = Number(item.number) || 0;
        const unitPrice = Number(item.unitPrice) || 0;
        const taxRate = Number(item.taxRate) || 0;

        // 计算总价(不含税)
        const totalPrice = number * unitPrice;
        this.$set(item, "totalPrice", totalPrice.toFixed(2));

        // 计算税额
        const taxPrice = totalPrice * (taxRate / 100);
        this.$set(item, "taxPrice", taxPrice.toFixed(2));

        // 计算含税总价
        const totalTaxPrice = totalPrice + taxPrice;
        this.$set(item, "totalTaxPrice", totalTaxPrice.toFixed(2));
      }
    },

    // 远程搜索负责人
    async searchDirectors(query) {
      this.directorLoading = true;
      try {
        // 准备请求参数
        const params = {
          name: query,
          page: 1,
          pageSize: 9999,
        };

        // 调用API获取负责人列表
        const res = await selStaffListApi(params);
        this.directorList = res.records || [];
      } catch (error) {
        console.error("搜索负责人失败:", error);
        this.$message.error("搜索负责人失败");
      } finally {
        this.directorLoading = false;
      }
    },

    // 负责人改变
    handleDirectorChange() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 状态改变
    handleStatusChange(val) {
      console.log(val);
      this.listQuery.page = 1;
      this.getList();
    },
    // 日期改变
    handleDateChange(val) {
      if (val) {
        // 设置开始时间为当天的 00:00:00
        const startDate = new Date(val[0]);
        startDate.setHours(0, 0, 0, 0);
        this.listQuery.startTime = Math.floor(startDate.getTime() / 1000);

        // 设置结束时间为当天的 23:59:59
        const endDate = new Date(val[1]);
        endDate.setHours(23, 59, 59, 999);
        this.listQuery.endTime = Math.floor(endDate.getTime() / 1000);
      } else {
        // 当清空日期范围时
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }

      // 可以选择是否要立即触发查询
      // this.getList();
    },

    // 搜索
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    // 重置搜索
    resetFilter() {
      this.listQuery = {
        page: 1,
        pageSize: 10,
        goodsId: "",
        directorId: "",
        startTime: "",
        endTime: "",
        status: "",
      };
      this.getList();
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },

    // 选择商品
    handleGoodsSelect(val) {
      this.listQuery.goodsId = val;
      this.handleFilter();
    },

    // 点击历史单据
    handleSave() {
      this.$router.push({
        name: "OrderHistoricalDocuments",
      });
    },
    // 打开商品选择弹窗
    selectProduct(index, row) {
      this.productDialogVisible = true;
      this.currentEditIndex = index;
      this.currentEditRow = row;
      this.getProductList();
    },

    // 获取商品列表
    getProductList() {
      // TODO: 调用接口获取商品列表
      this.productList = [
        {
          productCode: "SP0001",
          productName: "巧克力",
          brand: "费列罗",
          specification: "200g",
          unit: "盒",
          availableStock: 100,
          purchasePrice: 58.0,
        },
        // ... 更多商品数据
      ];
    },
    // 商品选择变化
    handleGoodsChanges(val) {
      this.getList();
    },

    // 搜索商品
    searchProducts() {
      this.productQuery.page = 1;
      this.getProductList();
    },

    // 常用商品
    handleCommonProducts() {
      this.$message.info("加载常用商品列表");
    },

    // 商品选择变更
    handleProductSelectionChange(val) {
      this.selectedProducts = val;
    },

    // 确认选择商品
    confirmSelectProducts() {
      if (this.selectedProducts.length === 0) {
        this.$message.warning("请选择商品");
        return;
      }

      // 将选中的商品添加到表格
      this.selectedProducts.forEach((product) => {
        this.$set(
          this.tableData[this.currentEditIndex],
          "productName",
          product.productName
        );
        this.$set(
          this.tableData[this.currentEditIndex],
          "productImage",
          product.productImage
        );
        this.$set(
          this.tableData[this.currentEditIndex],
          "brand",
          product.brand
        );
        this.$set(this.tableData[this.currentEditIndex], "unit", product.unit);
        this.$set(
          this.tableData[this.currentEditIndex],
          "availableStock",
          product.availableStock
        );
      });

      this.productDialogVisible = false;
    },

    // 分类树节点点击
    handleNodeClick(data) {
      this.productQuery.category = data.label;
      this.searchProducts();
    },

    // 计算总数量
    calculateTotal() {
      this.totalQuantity = this.tableData.reduce((sum, item) => {
        return sum + (Number(item.quantity) || 0);
      }, 0);
    },

    // 表格复选框选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 获取仓库名称
    getWarehouseName(warehouseId) {
      const warehouse = this.warehouseList.find(
        (item) => item.id === warehouseId
      );
      return warehouse ? warehouse.name : warehouseId;
    },

    // 格式化时间戳
    formatTime(timestamp) {
      if (!timestamp) return "";
      const date = new Date(timestamp);
      return date.toLocaleString();
    },

    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        0: "warning", // 待审核
        1: "warning", // 审核中
        2: "success", // 已审核
      };
      return statusMap[status] || "info";
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: "待审核",
        1: "审核中",
        2: "已审核",
      };
      return statusMap[status] || "未知状态";
    },

    // 商品选择变化时的处理
    async handleGoodsChange(goodsId) {
      if (!goodsId) {
        this.resetGoodsInfo();
        return;
      }

      try {
        const res = await selGoodsByIdApi(goodsId);
        if (res.code === 1) {
          const goodsInfo = res.data;
          // 只赋值新增表单需要的字段
          this.form.unitPrice = goodsInfo.price || 0; // 单价
          this.form.taxRate = goodsInfo.tax || 0; // 税率
          this.form.warehouseId = goodsInfo.warehouseId; // 仓库ID

          // 设置相关字段为只读
          this.formDisabled = {
            unitPrice: true,
            taxRate: true,
            warehouseId: true,
          };

          // 触发金额计算
          this.handleInputChange();
        }
      } catch (error) {
        console.error("获取商品信息失败:", error);
        this.$message.error("获取商品信息失败");
      }
    },

    // 重置商品相关信息
    resetGoodsInfo() {
      this.form.unitPrice = 0;
      this.form.taxRate = 0;
      this.form.warehouseId = "";
      this.formDisabled = {
        unitPrice: false,
        taxRate: false,
        warehouseId: false,
      };
    },

    // 删除记录
    handleDelete(row) {
      this.$confirm("确认删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const res = await delBuyGoodsByIdApi(row.id);
            if (res.code === 1) {
              this.$message.success("删除成功");
              this.getList(); // 刷新列表
            } else {
              this.$message.error(res.msg || "删除失败");
            }
          } catch (error) {
            console.error("删除失败:", error);
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          // 取消删除操作
        });
    },

    // 打开编辑弹框
    async handleEdit(row) {
      console.log("开始编辑购货单，行数据:", row);
      this.currentEditId = row.id;

      // 重置表单
      this.resetForm();

      // 填充基本信息
      this.form.directorId = row.directorId;
      this.form.remark = row.remark;

      // 填充商品明细
      if (row.list && Array.isArray(row.list) && row.list.length > 0) {
        // 清空默认的商品项
        this.form.buyGoodsGoodsDTOS = [];

        // 填充商品明细
        this.form.buyGoodsGoodsDTOS = row.list.map((item) => ({
          id: item.id,
          goodsId: item.goodsId,
          goodsName: item.goodsName,
          warehouseId: item.warehouseId,
          warehouseName: item.warehouseName,
          number: item.number,
          unitPrice: item.unitPrice,
          totalPrice: item.totalPrice,
          taxRate: item.taxRate,
          taxPrice: item.taxPrice,
          totalTaxPrice: item.totalTaxPrice,
        }));
      } else {
        // 如果没有商品明细，添加一个空行
        this.form.buyGoodsGoodsDTOS = [this.getDefaultGoodsItem()];
      }

      // 设置对话框标题和显示
      this.dialogTitle = "编辑购货单";
      this.dialogVisible = true;
    },

    // 处理表单提交（新增或编辑）
    async handleEditSubmit() {
      try {
        // 验证表单
        await this.$refs.form.validate();

        // 根据是否有currentEditId来判断是编辑还是新增
        if (this.currentEditId) {
          const params = {
            directorId: this.form.directorId,
            remark: this.form.remark,
            operatorId: this.form.operatorId || this.$store.getters.userId,
            buyGoodsGoodsDTOS: this.form.buyGoodsGoodsDTOS.map((item) => ({
              goodsId: item.goodsId,
              warehouseId: item.warehouseId,
              number: Number(item.number),
              unitPrice: Number(item.unitPrice),
              taxRate: Number(item.taxRate),
              taxPrice: Number(item.taxPrice),
              totalPrice: Number(item.totalPrice),
              totalTaxPrice: Number(item.totalTaxPrice),
            })),
          };

          console.log("提交编辑参数:", params);
          const res = await updateBuyGoodsByIdApi(this.currentEditId, params);

          if (res.code === 1) {
            this.$message.success("更新成功");
            this.dialogVisible = false;
            this.getList(); // 刷新列表
          } else {
            this.$message.error(res.msg || res.message || "更新失败");
          }
        } else {
          // 新增时使用 buyGoodsGoodsDTOS 数组结构
          const validItems = this.form.buyGoodsGoodsDTOS.filter(
            (item) => item.goodsId && item.warehouseId
          );

          if (validItems.length === 0) {
            this.$message.warning("请至少添加一个有效的商品项");
            return;
          }

          const params = {
            directorId: this.form.directorId,
            operatorId: this.form.operatorId || this.$store.getters.userId,
            remark: this.form.remark,
            askId: this.form.askId || "",
            // 将表单中的商品明细转换为接口所需的格式
            buyGoodsGoodsDTOS: validItems.map((item) => ({
              goodsId: item.goodsId,
              warehouseId: item.warehouseId,
              number: parseInt(item.number),
              unitPrice: parseFloat(item.unitPrice),
              taxRate: parseFloat(item.taxRate),
              taxPrice: parseFloat(item.taxPrice),
              totalPrice: parseFloat(item.totalPrice),
              totalTaxPrice: parseFloat(item.totalTaxPrice),
            })),
          };

          console.log("提交新增参数:", params);
          const res = await addBuyGoodsoApi(params);

          if (res.code === 1) {
            this.$message.success("新增成功");
            this.dialogVisible = false;
            this.getList(); // 刷新列表
          } else {
            this.$message.error(res.msg || res.message || "新增失败");
          }
        }

        // 重置currentEditId
        this.currentEditId = null;
      } catch (error) {
        console.error("操作失败:", error);
        this.$message.error("操作失败: " + (error.message || "未知错误"));
      }
    },

    // 数量变化处理方法
    handleNumberChange(index) {
      console.log("数量变化，更新价格计算");
      this.updateItemPrice(index);
    },

    // 更新商品行的价格计算
    updateItemPrice(index) {
      const item = this.form.buyGoodsGoodsDTOS[index];
      if (!item) return;

      // 获取数值并确保是数字类型
      const number = parseInt(item.number) || 0;
      const unitPrice = parseFloat(item.unitPrice) || 0;
      const taxRate = parseFloat(item.taxRate) || 0;

      // 计算总价(不含税)
      const totalPrice = number * unitPrice;
      this.$set(item, "totalPrice", totalPrice.toFixed(2));

      // 计算税额
      const taxPrice = totalPrice * (taxRate / 100);
      this.$set(item, "taxPrice", taxPrice.toFixed(2));

      // 计算含税总价
      const totalTaxPrice = totalPrice + taxPrice;
      this.$set(item, "totalTaxPrice", totalTaxPrice.toFixed(2));

      console.log("价格更新完成:", item);
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.search-wapper {
  margin-bottom: 15px;
}
.table-operations-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table-operations {
  margin-bottom: 15px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

.shopping-entry {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  align-items: center;
}

.entry-buttons {
  display: flex;
}

.circle-btn {
  margin-right: 10px;
  border-radius: 20px;
}

.attachment-info {
  display: flex;
  align-items: center;
}

.upload-link {
  margin-right: 15px;
}

.product-header {
  display: flex;
  align-items: center;
}

.required-mark {
  color: #f56c6c;
  margin-right: 4px;
}

.product-select {
  color: #409eff;
  cursor: pointer;
}

.product-image {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
}

.batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.batch-tag {
  background-color: #909399;
  color: white;
  font-size: 10px;
  padding: 0 4px;
  border-radius: 2px;
}

.info-header {
  display: flex;
  align-items: center;
}

.info-header .el-icon-question {
  margin-left: 4px;
  color: #909399;
  cursor: help;
}

/* 合计行 */
.summary-row {
  display: flex;
  background-color: #fdf6ec;
  padding: 10px 15px;
  font-weight: bold;
  border: 1px solid #ebeef5;
  border-top: none;
}

.summary-label {
  width: 50px;
}

/* 备注区域 */
.remark-container {
  margin-bottom: 20px;
}

/* 金额信息区域 */
.amount-container {
  margin-bottom: 20px;
}

.amount-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.amount-item {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 10px;
}

.amount-label {
  white-space: nowrap;
  margin-right: 5px;
  width: 80px;
  text-align: right;
}

.amount-input {
  width: 120px;
}

.amount-input.wider {
  width: 150px;
}

/* 自定义下划线 */
.custom-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 13px 0;
}

/* 底部工具栏 */
.footer-toolbar {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
}

.blue-text {
  color: #409eff;
}

.history-buttons .history-btn {
  margin-left: 10px;
}

.blue-radio.el-radio ::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #409eff;
}

.address-edit {
  margin-left: 5px;
  cursor: pointer;
  color: #409eff;
}

.product-dialog-content {
  .search-bar {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .product-content {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;

    .product-table {
      flex: 1;
    }

    .category-tree {
      width: 200px;
      border-left: 1px solid #ebeef5;
      padding-left: 15px;
    }
  }
}

.dialog-footer {
  text-align: right;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 金额相关的列右对齐 */
.el-table .cell {
  text-align: right;
}

/* 状态标签居中 */
.el-tag {
  margin: 0 auto;
}

.el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

/* 商品明细样式 */
.goods-detail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  padding: 5px;
}

.goods-item {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.goods-item:last-child {
  border-bottom: none;
}

.goods-row {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.goods-row:last-child {
  margin-bottom: 0;
}

/* 第一行样式 */
.goods-name {
  width: 120px;
  font-weight: 500;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 10px;
}

.goods-type {
  width: 120px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goods-number {
  width: 100px;
  color: #606266;

  .number-value {
    color: #409eff;
    font-weight: 500;
  }
}

.goods-price {
  width: 120px;
  color: #606266;

  .price-value {
    color: #67c23a;
    font-weight: 500;
  }
}

/* 第二行样式 */
.goods-tax-rate {
  width: 120px;
  color: #606266;
  padding-left: 10px;

  .tax-rate-value {
    color: #909399;
  }
}

.goods-tax-price {
  width: 120px;
  color: #606266;

  .tax-price-value {
    color: #e6a23c;
  }
}

.goods-total {
  width: 110px;
  color: #606266;

  .total-value {
    color: #f56c6c;
    font-weight: 500;
  }
}

.goods-tax-total {
  width: 120px;
  color: #606266;

  .tax-total-value {
    color: #f56c6c;
    font-weight: 500;
  }
}

.no-goods {
  color: #909399;
  padding: 10px 0;
}

/* 批量新增商品表单样式 */
.goods-list-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.total-info {
  margin-top: 20px;
  text-align: right;
  padding-right: 20px;
}

.total-label {
  font-weight: bold;
  color: #606266;
  margin-left: 20px;
}

.total-value {
  font-size: 16px;
  color: #409eff;

  &.price {
    color: #f56c6c;
    font-weight: bold;
  }
}

/* 商品明细表格样式 */
.goods-table-container {
  margin-bottom: 20px;
}

.add-goods-btn {
  margin-top: 10px;
  text-align: center;
}

/* 表单内嵌表格项去除底部间距 */
.mb-0 {
  margin-bottom: 0;
}

/* 搜索区域样式 */
.search-select {
  width: 200px;
}

.date-picker {
  width: 100%;
}

/* 自定义分隔线 */
.custom-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 15px 0;
}

/* 表格操作按钮样式 */
.operation-buttons {
  display: flex;
  justify-content: center;
}

.button-container {
  width: 90px;
  margin: 0 2px;
}

.button-placeholder {
  height: 32px; /* 与按钮高度一致 */
}

/* 商品明细显示样式 */
.goods-detail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
}

.goods-item {
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dashed #ebeef5;
}

.goods-item:last-child {
  border-bottom: none;
}

.goods-name {
  font-weight: bold;
  width: 150px;
  color: #303133;
}

.goods-type {
  color: #909399;
  width: 80px;
}

.goods-number {
  width: 80px;

  .number-value {
    color: #409eff;
    font-weight: 500;
  }
}

.goods-money {
  color: #f56c6c;
  font-weight: bold;
}
</style>
